<template>

  <div>
    <h3>账号 高磊  密码: 123</h3>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="登录页面"
      :breadcrumb="{ props: { routes } }"
      sub-title="This is a Login"
    />

    <!-- <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    > -->
      <a-form-item>
        <a-input v-model="username"
                 v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入您的用户名!' }] },
        ]"
                 placeholder="Username"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model="password"
                 v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入您的密码!' }] },
        ]"
                 type="password"
                 placeholder="Password"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
        >记住密码

        </a-checkbox>
        <a class="login-form-forgot" href="">

        </a>
        <a-button @click="login" type="primary" class="login-form-button">
          登录
        </a-button>
        <a href="">
          忘记密码
        </a>
        <a href="">
          立即注册
        </a>
      </a-form-item>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '', // 用户名
      password: '', // 密码
      routes: [
        {
          path: 'index',
          breadcrumbName: 'First-level Menu',
        },
        {
          path: 'first',
          breadcrumbName: 'Second-level Menu',
        },
        {
          path: 'second',
          breadcrumbName: 'Third-level Menu',
        },
      ],
    }
  },

  // beforeCreate() {
  //   this.form = this.$form.createForm(this, {name: 'normal_login'});
  // },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    // 登录
    login() {
      axios({
        url: 'http://127.0.0.1:8000/login/',
        method: 'post',
        data: {'username': this.username, 'password': this.password}
      }).then(res => {
        console.log(res.data)
        if(res.data.code==44444){
          alert(res.data.msg)
        }
        if(res.data.code==10004){
          alert(res.data.msg)
        }
        if (res.data.code == 10000) {
          alert(res.data.msg)
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('username', res.data.username)
        }
      })
    }
  },
};
</script>
<style>
#components-form-demo-normal-login .login-form {
  width: 30%;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 30%;
}
</style>
